import { Callout } from "nextra/components";

# Agents (LangChain/LangGraph)

<Callout type="info">
  The LangChain/LangGraph integrations are in Beta.
</Callout>

Give your in-app Copilot skills, via LangChain and LangGraph.

## Background

Copilot *skills* are standalone LLM chains (and graphs) optimized for a particular task. You can bring skills into your copilot with just a few lines of code.

CopilotKit will route relevant state as input to the standalone skill chains (state can come from the frontend, backend, 3rd party integrations, or from the user). When the chain returns, the Copilot Engine funnels its output to in-app interaction as needed.

[Click here to view an example repository](https://github.com/CopilotKit/presentation-demo)

## Backend Actions: LangChainJS

Adding your custom chains into CopilotKit is a straightforward process. Simply return the call to LangChain and CopilotKit will automatically handle the rest.

This simple example demonstrates how to stream back from LangChain to the frontend.

```tsx
const copilotKit = new CopilotRuntime({
  actions: [
    {
      name: "sayHello",
      description: "Says hello to someone.",
      argumentAnnotations: [
        {
          name: "name",
          type: "string",
          description: "The name of the person to say hello to.",
          required: true,
        },
      ],
      implementation: async (name) => {
        const prompt = ChatPromptTemplate.fromMessages([
          [
            "system",
            "The user tells you their name. Say hello to the person in a creative way.",
          ],
          ["user", "My name is {name}"],
        ]);
        const chain = prompt.pipe(new ChatOpenAI());
        return chain.stream({
          name: name,
        });
      },
    },
  ],
});
```

When you return any LangChain message type, it will be presented to the user as a message in the chat:

- `IteratbleReadableStream`
- `BaseMessageChunk`
- `AIMessage`

If you want to return a result which should not be presented, you can just return anything serializable to JSON. These results will then be fed back to the LLM which can use them to make further decisions.

## Backend Actions: LangServe (LangChain Python)

The backend also supports LangServe, enabling you to connect to existing chains, written in Python or JavaScript. Use the `langserve` parameter to specify URLs for LangServe.

```tsx
const copilotKit = new CopilotRuntime({
  langserve: [
    {
      chainUrl: "http://my-langserve.chain",
      name: "performResearch",
      description: "Performs research on a given topic.",
    },
  ],
});
```
## LangGraph

[Check out this example](https://github.com/CopilotKit/presentation-demo/blob/main/src/app/api/copilotkit/route.ts) to see how to intergate LangGraph into CopilotKit.

